Progressive rendering example

This example shows how to use the Progressive Rendering Viewport 2D node.

Use the Progressive Rendering Viewport 2D node to distribute the rendering workload across several frames to reduce the amount of work and time required to render one whole frame. Kanzi continues to render all content not rendered by a Progressive Rendering Viewport 2D node every frame.

Note that all content rendered by a Progressive Rendering Viewport 2D node is updated every n frames, where n is the number of render passes you use in a Progressive Rendering Viewport 2D node. When you use a Progressive Rendering Viewport 2D node to render interactive content this can make such content less responsive.

When you divide complex and rendering-intensive content into even parts, you can use a Progressive Rendering Viewport 2D node to improve the rendering performance of your application.

In a Progressive Rendering Viewport 2D Kanzi renders one render pass in one frame. To keep the framerate from fluctuating, distribute the rendering into even parts among the render passes used by a Progressive Rendering Viewport 2D node. To distribute the rendering into even parts make sure that each render pass renders:

For example, use the Progressive Rendering Viewport 2D node to render the content at different update frequencies. To render part of the content at 60 fps and the rest of the content at 30 fps, all content together must render in 16 ms or less (1000 ms / 60 fps = 16,6 ms). If the longest time it takes to render your 60 fps content is 10 ms, to display the rest of the content at 30 fps:

  1. Split the content you want to render at 30 fps into two or three parts so that each part renders in 6 ms or less. In order to render your 60 fps content every frame at 60 fps, the total render time of both 60 fps and 30 fps content must not be higher than 16,6 ms.
  2. Use the Progressive Rendering Viewport 2D node to render the 30 fps content. If you split the content into two parts, Kanzi renders the entire 30 fps content every two frames. If you split the content into three parts, Kanzi renders the entire 30 fps content every three frames.

Tip When splitting content into parts, to find out how much time it takes to render each part:

  1. In the Preview click and enable the Performance HUD, or enable the Performance HUD in the application.cfg file or onConfigure() function when using the Kanzi Engine API. See Analyzing your application in the Preview and Show the performance information.
  2. Hide the content you do not want to render. In Kanzi Studio in the Project select the nodes you want to hide and press Ctrl+H, or add and disable the Visible property.

To learn how to use the Progressive Rendering Viewport 2D node, see Distributing rendering across several frames.

See also

Distributing rendering across several frames

Rendering best practices

Examples